<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  th:with="title='我的订单',active='userinfo'"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'')"></head>
<style>

</style>
	<body>

		<div th:replace="web/layout/header::header(${active})"></div>
		<!--	main	-->
		<div class="fly-main wrapper">
			<div class="layui-card">
				<div class="layui-card-header">我的订单</div>
				<div class="layui-card-body">
					<table class="layui-table" id="order-table" lay-filter="order-table"></table>
				</div>
			</div>
			<div id="sqDiv" class="layui-elem-quote" style="position: relative;padding: 0;">
				<img class="pull-left" width="100px" height="100px"
					 src="https://i.loli.net/2019/08/22/U6VhN1MLWiYdpvD.png"/>
				<span style="position: absolute;top: 40%;transform: translateY(-50%);padding: 0 15px;">
					感谢购买，扫描二维码加入售后用户群，群号：812423757，
					<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=2c5341560f021d4f11d66302f010945045b52dd76f223ed76f25ecc2a2efe266"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Java大巴技术交流" title="Java大巴技术交流"></a>

				</span>

				<span style="position: absolute;top: 70%;transform: translateY(-50%);padding: 0 15px;">
					如果订单出现任何问题，请找管理员联系，QQ：904274014
				</span>
				<div class="layui-clear"></div>

			</div>

		</div>
		<!--	main end	-->
<!--	底部版权		-->
<div th:replace="web/layout/footer::footer"></div>
<!--	搜索		-->
<div th:replace="web/layout/common::pop-search"></div>
<!--	右边工具栏	-->
<div th:replace="web/layout/common::right-bar"></div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js"></div>
<!-- 表格操作列 -->
<script type="text/html" id="order-table-bar">
	{{# if(d.state==0){ }}

	{{# }else if(d.state==1){ }}
	<a class="layui-btn layui-btn-xs" lay-event="pay">继续支付</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">取消订单</a>
	{{# }else if(d.state==2){ }}
	<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除订单</a>
	{{# }else if(d.state==3){ }}
	<a href="javascript:;" lay-tips="订单状态会存在延迟，请等待几分钟刷新页面，或联系管理员核验订单">
		<i class="layui-icon layui-icon-tips" style="font-size: 20px;"></i>
	</a>
	{{# } }}
</script>
<script type="text/html" id="order-table-type">
	{{# if(d.goodsType==1){ }}
	<span class="color-success">元宝订单</span>
	{{# }else if(d.goodsType==2){ }}
	<span class="color-danger">VIP订单</span>
	{{# } }}
</script>
<script type="text/javascript" th:inline="javascript">
	layui.use(['layer', 'table', 'util','admin'], function () {
		var $ = layui.jquery;
		var layer = layui.layer;
		var table = layui.table;
		var util = layui.util;
		var admin = layui.admin;
		// 渲染表格
		table.render({
			elem: '#order-table',
			url: '/order/list',
			page: false,
			cellMinWidth: 100,
			cols: [
					[
				{type: 'numbers'},
				{field: 'goodsName', align: 'center', title: '产品', minWidth: 150},
				{field: 'money', align: 'center', title: '价格', width: 100},
				{field: 'gold', align: 'center', title: '元宝', width: 100},
				{field: 'goodsType', align: 'center', title: '订单类型', width: 100,templet:'#order-table-type'},
				{
					align: 'center', templet: function (d) {
						return util.toDateString(d.createTime);
					}, title: '下单时间', width: 170, minWidth: 170
				},
				{
					align: 'center', templet: function (d) {
						var strs = ['<span class="color-success">支付成功</span>', '<span class="color-waring">待确认</span>',
							'<span class="color-danger">支付取消</span>', '<span class="color-waring">支付超时</span>'];
						return strs[d.state];
					}, title: '订单状态', width: 100
				},
				{align: 'center', toolbar: '#order-table-bar', title: '操作', minWidth: 180, width: 180}
			]
			],
			/*done: function (res, curr, count) {
				// 授权显示加群提示
				for (var i = 0; i < res.data.length; i++) {
					if (res.data[i].state == 0) {
						var goodsId = res.data[i].goodsId;
						if (goodsId == 1 || goodsId == 2 || goodsId == 3) {
							$('#sqDiv').removeClass('layui-hide');
						}
						break;
					}
				}
			},*/
			size: 'lg',
			text: {
				none: ''
			}
		});

		// 监听工具条
		table.on('tool(order-table)', function (obj) {
			var data = obj.data; // 获得当前行数据
			var layEvent = obj.event; // 获得 lay-event 对应的值

			if (layEvent === 'down') {  // 下载
				window.open('/goods/download/' + data.goodsId);
			} else if (layEvent === 'pay') {  // 继续支付
				location.replace('/order/pay?orderId=' + data.orderId);
			} else if (layEvent === 'cancel') {  // 取消订单
				layer.confirm('确定取消订单？', {
					title: '取消订单',
					icon: 3,
					skin: 'layui-layer-admin',
					shade: .1,
					anim: 2,
					btn: ['确定', '关闭']
				}, function (index, layero) {
					layer.close(index);
					doCancelOrder(data.orderId);
				});
			} else if (layEvent == 'del') {
				layer.confirm('确定删除此订单吗？', {
					title: '删除订单',
					icon: 3,
					skin: 'layui-layer-admin',
					shade: .1,
					anim: 2,
					btn: ['确定', '关闭']
				}, function (index, layero) {
					layer.close(index);
					doDelOrder(data.orderId);
				});
			}
		});

		// 取消订单
		function doCancelOrder(orderId) {
			layer.load(2);
			$.post('/order/cancelOrder', {
				orderId: orderId
			}, function (res) {
				layer.closeAll('loading');
				if (res.success) {
					layer.msg(res.msg, {icon: 1});
					table.reload('order-table');
				} else {
					layer.msg(res.msg, {icon: 2});
				}
			}, 'json');
		}

		// 删除订单
		function doDelOrder(orderId) {
			layer.load(2);
			$.post('/order/delOrder', {
				orderId: orderId
			}, function (res) {
				layer.closeAll('loading');
				if (res.success) {
					layer.msg(res.msg, {icon: 1});
					table.reload('order-table');
				} else {
					layer.msg(res.msg, {icon: 2});
				}
			}, 'json');
		}

	});
</script>

	</body>
</html>
